import React, { useMemo } from "react";
import { Result, Button } from "antd";
import type { ResultStatusType } from "antd/es/result";
import { LibAppView } from "../../../../lib";
import { useLocation } from "react-router-dom";
import { FormattedMessage } from "react-intl";

interface IPage404Props {
    hideBackButton?: boolean;
    title?: string|React.ReactNode;
    status?: ResultStatusType;
    subTitle?: string|React.ReactNode;
    backPageId?: string;
};

const Page404 = ({ status, title, subTitle, hideBackButton, backPageId }: IPage404Props) => {
    const app = LibAppView.useApp();
    const location = useLocation();
    const state = location.state;
    const titleValue = useMemo(() => state?.title ?? title ?? "404",[title, state]);
    const subTitleValue = useMemo(() => state?.subTitle ?? subTitle ?? "Sorry, the page you visited does not exist.",[subTitle, state]);
    const statusCode = useMemo(() => state?.status ?? status ?? 500, [status, state]);
    const statusValue = useMemo(() => ["403","404","500","error","info","success","warning"].includes(statusCode) ? statusCode : "500", [statusCode]);
    const hideBackButtonValue = useMemo(() => typeof state?.hideBackButton === "boolean" ? state?.hideBackButton : hideBackButton, [hideBackButton, state],)
    const gobackPageIdValue = useMemo(() => state?.backPageId ?? backPageId, [backPageId])

    return ( <Result
        status={statusValue}
        title={ titleValue}
        subTitle={ subTitleValue }
        extra={ !hideBackButtonValue ? <Button type="primary" onClick={() => {
            app.goto(gobackPageIdValue ?? "admin.main");
        }}>
            <FormattedMessage id="admin.back.home"/>
        </Button> : <></>}
      />);
};

export default Page404;